<template>
  <div>
    <city-header :title="title"></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
    <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
import axios from "axios";
import CityHeader from "./components/CityHeader.vue";
import CitySearch from "./components/CitySearch.vue";
import CityList from "./components/List.vue";
import CityAlphabet from "./components/Alphabet.vue";
export default {
  name: "City",
  components: {
    CityList,
    CityAlphabet,
    CityHeader,
    CitySearch
  },
  data() {
    return {
      title: "选择城市",
      showWord: false,
      cities: {},
      hotCities: [],
      letter: ""
    };
  },
  methods: {
    getCityInfo() {
      axios.get("/city.php").then(this.handleGetCityInfoSucc);
    },
    handleGetCityInfoSucc(res) {
      //console.log(res.data);
      // res = res.data;
      // if (res.ret && res.data) {
      //   const data = res.data;
      //   this.cities = data.cities;
      //   this.hotCities = data.hotCities;
      // }
      if (res.data.status === 0) {
        this.cities = res.data.cities;
        this.hotCities = res.data.hotCities;
        //console.log(this.hotCities);
      }
    },
    handleLetterChange(letter) {
      // console.log(letter);
      this.letter = letter;
      // this.showWord = true;
      // setTimeout(() => {
      //   this.showWord = false;
      //   console.log(this.showWord);
      // }, 500);
    }
  },
  activated() {
    this.getCityInfo();
  }
};
</script>

<style lang='scss' scoped>
.title {
  line-height: 40px;
  background: #10d1eb;
  color: #fff;
}
.word {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
.word span {
  display: inline-block;
  height: 60px;
  width: 60px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>